<template>
  <el-drawer
    append-to-body
    v-model="modalVisible"
    direction="rtl"
    :with-header="false"
    size="800"
  >
    <template #default>
      <div class="temp-box" v-loading="initLoading">
        <div class="temp-box-list">
          <template v-for="(item, index) in tempData" :key="index">
            <div
              class="temp-box-list-item"
              :class="selectedItem.value == item.value ? 'active' : ''"
              @click="changeSelected(item)"
            >
              <div class="temp-box-text">{{ item.title }}</div>
              <div class="temp-box-desc">
                <el-image :src="item.img" width="100%" />
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template #footer>
      <div>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="selectOk">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
  <script lang="ts">
export default {
  name: "storeDiyTempModal",
};
</script>
  <script setup lang="ts">
import { ref, getCurrentInstance, watch, onMounted } from "vue";
import { diyTempDataType } from "@/types";
import { getDiyTempList } from "@/api/store/diy_page";
import { Result, ResultError } from "@/types";
const props = withDefaults(
  defineProps<{
    title?: string;
    type?: string;
    modelValue?: diyTempDataType;
  }>(),
  {
    title: "选择模板",
    type: "",
    modelValue: () => {
      return {
        title: "",
        value: 0,
        img: "",
      };
    },
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["update:modelValue", "change"]);

const modalVisible = ref<boolean>(false);

const tempData = ref<Array<diyTempDataType>>([]);

const initLoading = ref<boolean>(true);

const toInit = () => {
  initLoading.value = true;
  getDiyTempList({
    type: props.type,
  })
    .then((res: Result) => {
      tempData.value = res.data;

      if (selectedIndex.value) {
        tempData.value.forEach((item: diyTempDataType) => {
          if (item.value == selectedIndex.value) {
            selectedItem.value = item;
          }
        });
      }
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const selectedItem = ref<diyTempDataType>(props.modelValue);

const selectedIndex = ref<number | string>(-1);

const changeSelected = (item: diyTempDataType) => {
  selectedItem.value = item;
};

const selectOk = () => {
  emit("update:modelValue", selectedItem.value);
  close();
};

const open = (selectIndex: number | string = 0) => {
  selectedIndex.value = selectIndex;
  modalVisible.value = true;
  toInit();
};

const close = () => {
  modalVisible.value = false;
};

onMounted(() => {});

defineExpose({ open });
</script>

<style scoped>
.temp-box {
  width: calc(100% - 100px);
  margin: 0 auto;
}
.temp-box-list {
  display: flex;
  flex-wrap: wrap;
}
.temp-box-list .temp-box-list-item {
  width: calc(50% - 20px);
  margin-right: 15px;
  border: 2px solid #f0f0f0;
  cursor: pointer;
  margin-bottom: 20px;
}
.temp-box-list .temp-box-list-item .temp-box-text {
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  line-height: 40px;
}
.temp-box-list .temp-box-list-item .temp-box-desc {
  width: calc(100% - 20px);
  padding: 10px;
  text-align: center;
}
.temp-box-list .temp-box-list-item.active {
  border: 2px solid var(--base-default);
}
</style>